<template>
    <div class="main-content">
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="query" ref="query" label-width="40px" label-position="right">
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="日期">
                                <el-row>
                                    <el-col :span="11">
                                        <el-date-picker v-model="query.startDate" :clearable="false" :editable="false" type="date" 
                                        placeholder="选择开始日期" :picker-options="pickerOptions1" @change="startDateChange" 
                                        style="width:100%"></el-date-picker>
                                    </el-col>
                                    <el-col :span="2" align="center">-</el-col>
                                    <el-col :span="11">
                                        <el-date-picker v-model="query.endDate" :clearable="false" :editable="false" type="date" 
                                        placeholder="选择结束日期" :picker-options="pickerOptions2" @change="endDateChange"
                                         style="width:100%"></el-date-picker>
                                    </el-col>
                                </el-row>  
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="onSubmit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
            <div slot="eCharts1" v-loading="loadingEchart">
                <div class="charts-title">用户使用机型分布</div>
                <div class="charts-display">
                    <trendChart width='100%' height='100%' id="barChart1" :option='barChart1Option'></trendChart>
                </div>
            </div>
            <div slot="table" >
                <div class="table-title">
                    <export-excel @ee="exportFile"></export-excel>
                </div> 
                <el-table :data="tableData" border v-loading="loading" style="width: 100%" @sort-change="sortTable">
                    <el-table-column label="机型" align="center">
                        <template scope="scope">
                            <span>{{scope.row.phoneModel}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="登录次数" align="center" sortable='custom' prop="loginNumber">
                        <template scope="scope">
                            <span>{{scope.row.loginNumber| isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="用户数" align="center" sortable='custom' prop="userNumber">
                        <template scope="scope">
                            <span>{{scope.row.userNumber | isNull}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageQuery.total"
                        :current-page.sync="pageQuery.currentpage"
                        :page-sizes="config.pageSizes"
                        :page-size="config.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    import moment from 'moment';
    import exportExcel from 'components/ExportExcel/index';
    import trendChart from 'components/Charts/trendChart';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import { mapState, mapActions } from 'vuex';
    import {pagePhoneModel} from 'api/pingtaifenxi';

    // import { getReportFormData } from 'api/reportForms'; 
    export default{
        components: {echartsLayout, trendChart, exportExcel },
        data() {
            return {
                loading: true,
                loadingEchart: true,
                formState: false,
                dataListState: true,
                eCharts1State: false,
                eCharts2State: true,
                eCharts3State: true,
                chartsListState: true,
                tableState: false,
                query: {
                    startDate: moment().add(-30, 'days').format('YYYY-MM-DD'),
                    endDate: moment().add(-1, 'days').format('YYYY-MM-DD')
                },
                tableData: [],
                pageQuery: {
                    currentpage: 1,
                    total: 0
                },
                userNumber: '',
                loginNumber: '1',
                pickerOptions1: {
                    disabledDate(time) {
                        // moment(new Date()).add(-1, 'days').format('YYYY-MM-DD'), // 昨天
                        return (time.getTime()) > (Date.now()- 864e5);
                    }
                },
                pickerOptions2: {
                    disabledDate(time) {
                        return (time.getTime()) >(Date.now()- 864e5);
                    }
                },
                barChart1Option: null,
                sortType: '',
                isDesc: true,
                queryId: 250,
                realTime: false,
                showList: true,
                jsonStr: null // 导出参数

            }
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        created() {
            this.queryData();
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.setTable();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.setTable();
            },
// 绘制图加列表
            queryData() {
                this.loading=true;
                this.loadingEchart=true;
                let page=this.pageQuery.currentpage;
                let rows=this.config.pageSize;
                let userNumberStatus=this.userNumber;
                let loginNumberStatus=this.loginNumber;
                let startDate = this.query.startDate==''?moment().subtract(30, 'days').format('YYYY-MM-DD'):moment(this.query.startDate).format('YYYY-MM-DD'); 
                let endDate = this.query.endDate === ''?moment().subtract(1, 'days').format('YYYY-MM-DD'):moment(this.query.endDate).format('YYYY-MM-DD');
                pagePhoneModel(page, rows, startDate, endDate, userNumberStatus, loginNumberStatus).then(res => {
                    this.loading=false;
                    this.loadingEchart=false;
                    let xAxisData=[];                                           
                    let bar1=[];
                    let bar2=[];
                    res.data.content.phoneModelTop.forEach(val => {
                        xAxisData.push(val.phoneModel)
                        bar1.push(val.loginNumber)// 登录总次数
                        bar2.push(val.userNumber)
                    })
                    this.barChart1Option = {
                        color: ['#2EC7C9', '#B6A2DE'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        legend: {
                            data: ['登录总次数', '用户数量'] // ['用户使用时长']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: xAxisData  
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                boundaryGap: [0, 0.01]
                            }
                        ],
                        series: [
                            {
                                name: '登录总次数',
                                type: 'bar',
                                data: bar1
                            },
                            {
                                name: '用户数量',
                                type: 'bar',
                                data: bar2
                            }
                        ]
                    };
                    this.tableData = res.data.content.phoneModel.list;
                    this.pageQuery.total = res.data.content.phoneModel.pagination?res.data.content.phoneModel.pagination.total:0;
                }).catch(() => {
                    this.loading=false;
                    this.loadingEchart=false;
                })
            },
// 只绘制表格
            setTable() {
                this.loading=true;
                let page=this.pageQuery.currentpage;
                let rows=this.config.pageSize;
                let userNumberStatus=this.userNumber;
                let loginNumberStatus=this.loginNumber;
                let startDate = this.query.startDate==''?moment().subtract(30, 'days').format('YYYY-MM-DD'):moment(this.query.startDate).format('YYYY-MM-DD'); 
                let endDate = this.query.endDate === ''?moment().subtract(1, 'days').format('YYYY-MM-DD'):moment(this.query.endDate).format('YYYY-MM-DD');
                pagePhoneModel(page, rows, startDate, endDate, userNumberStatus, loginNumberStatus).then(res => {
                    this.loading=false;
                    this.tableData = res.data.content.phoneModel.list;
                    this.pageQuery.total = res.data.content.phoneModel.pagination.total;
                }).catch(() => {
                    this.loading=false;
                })
            },
            exportFile() {
                let userNumberStatus=this.userNumber;
                let loginNumberStatus=this.loginNumber;
                let startDate = this.query.startDate==''?moment().subtract(30, 'days').format('YYYY-MM-DD'):moment(this.query.startDate).format('YYYY-MM-DD'); 
                let endDate = this.query.endDate === ''?moment().subtract(1, 'days').format('YYYY-MM-DD'):moment(this.query.endDate).format('YYYY-MM-DD');
                window.location.href = `${LOCAL_API.scy}/report/outExcelPhoneModel?userNumberStatus=${userNumberStatus}&loginNumberStatus=${loginNumberStatus}&startDate=${startDate}&endDate=${endDate}`
            },
            onSubmit() {
                this.pageQuery.currentpage = 1;
                this.queryData();
            },
            startDateChange(date) {
                this.pickerOptions2 = {
                    disabledDate(time) {
                        return (time.getTime() < new Date(date).getTime() - 864e5|| (time.getTime() > new Date().getTime()- 864e5));
                    }
                }
            },
            endDateChange(date) {
                this.pickerOptions1 = {
                    disabledDate(time) {
                        return (time.getTime() > new Date(date).getTime());
                    }
                } 
            },
            sortTable({ column, prop, order }) {
                this.loginNumber=prop=='loginNumber'?order=='ascending'?'0':'1':'';
                this.userNumber=prop=='userNumber'?order=='ascending'?'0':'1':'';
                this.setTable();
            }
        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        $bgcolor: #fff;
    }
</style>                     